<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<input id="normal-text" type="text" value="I'm normal text">
		<div id="host"></div>
		<template>
			<input id="shadow-text" type="text" value="I'm shadow text">
		</template>

		<script>
			var host = document.querySelector('#host');
			var root = host.createShadowRoot();
			var template = document.querySelector('template');
			root.appendChild(document.importNode(template.content, true));

			document.addEventListener('click', function(e) {
				console.log(e.target.id + ' clicked!');
			});
		</script>
	</body>

</html>